<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基础信息" name="basic">
        <asset-info-basic-info-div
            v-if="detailData" :basic-data="detailData" :source-data="sourceData"
            :target-data="targetData" :scheduler-data="schedulerData" :component-account-data="componentAccountData"
        />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import AssetInfoBasicInfoDiv from "@/views/lineage/asset/info/assetInfoBasicInfoDiv.vue";
import {
  componentAccount,
  detail,
  detailByKey,
  extend,
  schedulerLineageAssets,
  sourceLineageAssets,
  targetLineageAssets
} from "@/api/lineage/assetInfo";

export default {
  name: 'AssetInfoDetailDiv',
  components: {AssetInfoBasicInfoDiv},
  props: {
    // 优先使用assetInfoId查询详情
    assetInfoId: {type: Number, default: null},
    // 如果assetInfoId为null，则使用assetInfoKey查询详情
    // 如果assetInfoId和assetInfoKey都为null，则清空详情
    assetInfoKey: {type: Object, default: null},
  },

  data() {
    return {
      activeTab: 'basic',
      detailData: {},
      sourceData: [],
      targetData: [],
      schedulerData: [],
      extendInfo: {},
      componentAccountData: [],
    }
  },

  watch: {
    'assetInfoId': {
      handler() {
        this.activeTab = 'basic'
        if (this.assetInfoId) {
          detail(this.assetInfoId, true).then(res => {
            this.detailData = res.data
            sourceLineageAssets(this.assetInfoId).then(res => {
              this.sourceData = res.data
            })
            targetLineageAssets(this.assetInfoId).then(res => {
              this.targetData = res.data
            })
            schedulerLineageAssets(this.assetInfoId).then(res => {
              this.schedulerData = res.data
            })
            extend(this.assetInfoId).then(res => {
              this.extendInfo = res.data
            })
            componentAccount(this.assetInfoId).then(res => {
              this.componentAccountData = res.data
            })
          })
        } else {
          if (!this.assetInfoKey) {
            this.detailData = {}
          }
        }
      }, immediate: true
    },

    'assetInfoKey': {
      handler() {
        this.activeTab = 'basic'
        if (this.assetInfoKey) {
          detailByKey(this.assetInfoKey.stage, this.assetInfoKey.type, this.assetInfoKey.instanceName, this.assetInfoKey.sqlName).then(res => {
            this.detailData = res.data
            sourceLineageAssets(this.detailData.id).then(res => {
              this.sourceData = res.data
            })
            targetLineageAssets(this.detailData.id).then(res => {
              this.targetData = res.data
            })
            schedulerLineageAssets(this.detailData.id).then(res => {
              this.schedulerData = res.data
            })
            extend(this.detailData.id).then(res => {
              this.extendInfo = res.data
            })
            componentAccount(this.detailData.id).then(res => {
              this.componentAccountData = res.data
            })
          })
        } else {
          if (!this.assetInfoId) {
            this.detailData = {}
          }
        }
      }, immediate: true, deep: true
    }
  },
}
</script>
